<template>
  <div style="display: flex;flex-direction: column;align-items: center;font-size: 6px" :style="{width:iconWidth,height:iconHeight}">
    <img :src="svgSrc?svgSrc:unkownSrc" id="icon" :style="{width:iconHeight,height:iconHeight}"/>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: "svgIcon",
    props:['icon','width','height'],
    data(){
      return{
        svgPath:null,
        iconWidth:'20px',
        iconHeight:'20px',
        svgSrc:null,
        unkownSrc:require('./svg/file-type-unkown.svg')
      }
    },
    created() {
      try{
        this.svgSrc = require('./svg/'+this.icon+'.svg')
      }catch(e) {
        console.log('找不到文件：'+this.icon+'.svg')
      }
      this.iconWidth=this.width?this.width:'20px'
      this.iconHeight=this.height?this.height:'20px'
    }
  }
</script>

<style scoped>

</style>
